<template>
<div id="bg" >
<div id="login-box">
     <h3 style="color:#409EFF;margin:20px auto;font-weight:bold;font-size:20px;">登录</h3>
     <el-form ref="form" :model="form" :rules="rules" size="medium" style="width: 80%;margin:0 auto;">
       <el-form-item prop="name">
         <el-input required round v-model="form.name" placeholder="用户名" prefix-icon="el-icon-user" ></el-input>
       </el-form-item>
       <el-form-item prop="pwd">
         <el-input required v-model="form.pwd" placeholder="请输入登陆密码" show-password prefix-icon="el-icon-lock" ></el-input>
       </el-form-item>
       <el-form-item>
         <el-button round type="primary" @click="onSubmit('form')" style="display: block;margin: 0px auto;font-size:15px;width:100%;">登录</el-button>
       </el-form-item>
     </el-form>
    <div style="margin-top: -10px;color:#409EFF;" >
      <el-button type="text" @click="toPageRegister"  style="font-size:15px;font-weight:bold;">立即注册</el-button>
      <el-divider direction="vertical" style="color:blue"></el-divider>
      <router-link to="./forgetpassword"><el-button type="text" style="font-size:15px;">忘记密码？</el-button></router-link>
    </div>

   </div>
</div>
   
</template>

<script>
import {reqLogin} from "../../api";
import {mapActions,mapState} from 'vuex'

export default {
  name:'Login',
  data(){
    return {
      form:{
        name:'',
        pwd:'',
      },
      rules:{
        name:[
          {required:true,message:'请输入用户名',trigger:'blur'}
        ],
        pwd:[
          {required:true,message:'请输入密码',trigger:'blur'}
        ]
      },
      uid:''
    }
  },
  computed:{
    ...mapState(['uid'])
  },
  methods:{
    ...mapActions([
      'recordUid'
    ]),
    onSubmit:function (form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          reqLogin(this.form.name,this.form.pwd).then(res=>{
            console.log(res);
            const x=res.error_code;
            const userid=res.uid
            switch (x){
              case 0:
                this.recordUid(userid)
                this.$router.replace('/manage');break;
              case 1:alert("参数错误");break;
              case 2:alert("用户不存在");break;
              case 3:alert("密码错误");break;
            }
          })
        }else{
          return false;
        }
      })
    },
    toPageRegister:function (){
      this.$router.replace("register");
    }
  }

}

</script>
<style >
html,body{
   margin: 0;
   height: 100%;
}
#bg{
  height: 100%;
  background-image: url(../../../public/e.jpg);
}

#login-box{
  width:400px;
  height:300px;
  background-color: rgba(255,255,255,0.8);
  padding: 20px 20px 0 20px;
  border: solid;
  border-color:#f6f8fa;
  border-width: 1px;
  border-radius: 10%;
  position: absolute;
  top:200px ;
  left: 35%;
}
el-input{
  border-radius: 30%;
}
</style>